<template>
	<view class="feedback-box center column">
		<radio-group class="radio-group" @change="radioChange">
      <!-- 加上label，当点击文字时也会被触发-->
			<!-- 内容意见选项 -->
			<label class="label">
				<radio value="1" checked color="#007aff" style="transform: scale(0.7);" />内容意见
			</label>
			<!-- 产品建议选项 -->
			<label class="label">
				<radio value="2" color="#007aff" style="transform: scale(0.7);" />产品建议
			</label>
			<!-- 其他选项 -->
			<label class="label">
				<radio value="3" color="#007aff" style="transform: scale(0.7);" />其他
			</label>
		</radio-group>

		<!-- 反馈内容输入框 -->
		<textarea  v-model="formData.content" maxlength="500" placeholder="请填写具体内容帮助我们了解您的意见和建议" />
		<!-- QQ输入框 -->
		<input v-model="formData.qq" maxlength="15" type="text" placeholder="填写您的QQ">
		<!-- 微信输入框 -->
		<input v-model="formData.weixin" maxlength="25" type="text" placeholder="填写您的微信">

		<!-- #ifdef APP-PLUS -->
		<!-- 位置信息显示（仅APP端） -->
		<view class="location">
			<view>您的当前位置：</view>
			<text>{{location || '获取信息中'}} </text>
		</view>
		<!-- #endif -->

		<button :loading="loading" :disabled="loading" type="primary" @click="submitHandler">提交</button>
	</view>
</template>

<script>
	import api from '@/api/system.js'

	export default {
		data() {
			return {
				formData: {
					type: 1, // 类型，默认为内容意见
					content: '', // 反馈内容
					qq: '', // QQ号码
					weixin: '' // 微信号
				} ,
				location: '', //当前位置
				loading: false, // 提交加载状态
			}
		},

		onLoad() {
			// #ifdef APP-PLUS
			//针对app端获取用户位置
			uni.getLocation({
				geocode: true, //解析中文地址信息
				success: (res) => {
					console.log('res.address', res.address.province, res.address.city)
					// 拼接省份和城市信息
					this.location = res.address.province + res.address.city
				}
			})
			// #endif
		},

		methods: {
			radioChange(e) {
        console.log(typeof this.formData.type)
        this.formData.type = Number.parseInt(e.detail.value)
			},

			// 提交反馈意见
			async submitHandler() {
				// 验证反馈内容是否为空或少于10个字符
				if(!this.formData.content
					|| this.formData.content.trim().length<10 ) {
					this.$util.msg('反馈内容至少输入10个字')
					return
				}

				if(!this.formData.qq && !this.formData.weixin ) {
					this.$util.msg('QQ和微信至少填写一个')
					return
				}

				if(this.formData.qq
					&& !this.$util.checkStr(this.formData.qq, 'QQ')) {
					this.$util.msg('QQ填写错误')
					return
				}

				if(this.formData.weixin
					&& !this.$util.checkStr(this.formData.weixin, 'weixin')) {
					this.$util.msg('微信填写错误')
					return
				}

        console.log('反馈数据this.formData', this.formData)

				this.loading = true
				// 显示提交中提示
				uni.showLoading({
					title: '提交中',
					mask: true
				})

				// 调用API提交反馈
				const res = await api.addFeedback(this.formData)
				this.loading = false
				uni.hideLoading()
				// 检查提交结果
				if(!res.code === 20000) {
					this.$util.msg(res.message)
					return
				}

				uni.showModal({
					content: '您的意见反馈成功！',
					showCancel: false,
					success: ()=> {
            //返回上一页
						this.navBack()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	// 页面样式
	page {
		background-color: $mxg-color-grey;
	}

	// 反馈框样式
	.feedback-box {
		padding: 0 30rpx;
	}

	// 单选框组样式
	.radio-group {
		margin: 30rpx 0;
		.label {
			margin-right: 30rpx;
			font-size: 30rpx;
			color: $mxg-text-color-black;
		}
	}

	// 文本域样式
	textarea {
		border: 1px solid #e9e9e9;
		width: 100%;
		padding: 10rpx;
		line-height: 60rpx;
	}

	// 输入框样式
	input {
		width: 100%;
		border: 1px solid #e9e9e9;
		margin-top: 30rpx;
		padding: 10rpx;
		height: 70rpx;
	}

	// 位置信息样式
	.location {
		margin: 50rpx 0;
		align-self: flex-start; /* 左对齐 */
		font-size: 30rpx;
		color: $mxg-text-color-grey;
		line-height: 50rpx;
		text {
			color: $mxg-text-color-black;
		}
	}

	// 主要按钮样式
	button[type=primary] {
		width: 100%;
		margin-top: 50rpx;
		background-color: $mxg-text-color-blue !important;
	}

	// 按钮悬停样式
	.button-hover[type=primary] {
		background-color: $mxg-color-primary !important;
	}
</style>
